<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-form :model="form" :rules="rules" ref="ruleForm">
      <!-- 表单项 start -->
      <el-form-item label="属性名称" prop="name" :label-width="formLabelWidth">
        <el-input v-model="form.name" placeholder="请输入属性名称，例如 [ 选择规格，选择颜色 ]"></el-input>
      </el-form-item>
      <el-form-item label="可选项" prop="options" :label-width="formLabelWidth">
        <el-select
          v-model="form.optionList"
          multiple
          filterable
          allow-create
          placeholder="请输入可选项，例如 [ 白色，黑色，青色 ]"
        >
        </el-select>
      </el-form-item>
      <!-- 表单项 end -->
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="saveOrUpdate" :loading="loading"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import updateMixins from "@/views/base/updateMixins";

// 请求接口 start
import productApi from "@/api/productApi";
// 请求接口 end

export default {
  // 组件名称 start
  name: "productSaleAttrUpdate",
  // 组件名称 end

  props: ["dialogTitle"],
  mixins: [updateMixins],
  data() {
    return {
      // 表格数据及校验规则 start
      initForm: {
        name: "",
        optionList: [],
      },
      form: {
        name: "",
        optionList: [],
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 之间",
            trigger: "blur",
          },
        ],
      },
      // 表格数据及校验规则 end
    };
  },
  methods: {
    // 数据详情 start
    remoteData(row) {
      productApi.saleAttr
        .info(row.id)
        .then((res) => {
          this.form = JSON.parse(JSON.stringify(res.data));
          this.form.optionList = [];
          this.form.sort = null;
          res.data.optionList.forEach((option) => {
            this.form.optionList.push(option.attrValue);
          });
        })
        .catch((error) => {});
    },
    // 数据详情 end

    saveOrUpdate() {
      // 新增或编辑 start
      this.$refs["ruleForm"].validate((valid) => {
        var params = { ...this.form, ...this.meta };
        if (valid) {
          this.showLoading(true);
          if (!params.id) {
            productApi.saleAttr
              .save(params)
              .then((res) => {
                this.showDialog(false);
                this.$parent.querySearchForm();
              })
              .catch((error) => {
                this.showLoading(false);
              });
          } else {
            productApi.saleAttr
              .update(params)
              .then((res) => {
                this.showDialog(false);
                this.$parent.querySearchForm();
              })
              .catch((error) => {
                this.showLoading(false);
              });
          }
        }
      });
      // 新增或编辑 end
    },
  },
};
</script>
<style lang="less" scoped>
.el-form .el-select {
  width: 100%;
}
</style>